<template>
  <div>
    <a-auto-complete v-model:value="searchText" :options="options" style="width: 85%; height: 40px" size="large" placeholder="请输入搜索内容" @select="onSearch" @search="getSearchPrompt" />
    <a-button type="primary" size="large" style="width: 10%" @click="onSearch(searchText as string)"><span style="font-family: 'Courier New', Courier, monospace">搜索</span></a-button>
    <MyDivider></MyDivider>
    <a-tabs v-model:activeKey="activeKey" @change="onClickTab">
      <a-tab-pane key="post" tab="帖子"><PostList :post-list="postList"></PostList></a-tab-pane>
      <a-tab-pane key="images" tab="图片"><ImagesList :picture-list="pictureList"></ImagesList></a-tab-pane>
      <a-tab-pane key="user" tab="用户"><UserList :user-list="userList"></UserList></a-tab-pane>
      <a-tab-pane key="video" tab="视频"><VideoList :video-list="videoList"></VideoList></a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watchEffect } from 'vue';
import ImagesList from '@/components/imagesList.vue';
import PostList from '@/components/postList.vue';
import UserList from '@/components/userList.vue';
import VideoList from '@/components/videoList.vue';
import MyDivider from '@/components/MyDivider.vue';
import { useRoute, useRouter } from 'vue-router';
import request from '@/plugins/request';
import { message } from 'ant-design-vue';

const router = useRouter();
// 获取当前页面的路由信息
const route = useRoute();

// 图片列表
const pictureList = ref([]);

// 用户列表
const userList = ref([]);

// 帖子列表
const postList = ref([]);

// 视频列表
const videoList = ref([]);

// 自动补全输入框的提示数组
const options = ref<any[]>([]);

// 当前被激活的key   在页面刷新后，可以在动态路由参数中获取到上次活跃的key
const activeKey = route.params.category;

const initSearchParams = {
  type: activeKey,
  text: '',
  pageNum: 1,
  pageSize: 8
};
const searchText = ref(route.query.text || '');

// 搜索内容
const searchParams = ref(initSearchParams);

/**
 * 加载数据
 * @param params
 */
const loadDataOld = (params: any) => {
  const postQuery = {
    ...params,
    searchText: params.text
  };
  request.post('post/list/page/vo', postQuery).then((res: any) => {
    postList.value = res.records;
  });

  const userQuery = {
    ...params,
    userName: params.text
  };
  request.post('user/list/page/vo', userQuery).then((res: any) => {
    userList.value = res.records;
  });

  const pictureQuery = {
    ...params,
    searchText: params.text
  };
  request.post('picture/list/page/vo', pictureQuery).then((res: any) => {
    pictureList.value = res.records;
  });
};

/**
 * 加载聚合数据
 * @param params
 */
const loadAllData = (params: any) => {
  const query = {
    ...params,
    searchText: params.text
  };
  request.post('search/all', query).then((res: any) => {
    postList.value = res.data.postList;
    userList.value = res.data.userList;
    pictureList.value = res.data.pictureList;
    videoList.value = res.data.videoList;
    console.log(pictureList.value);
  });
};
// 加载单类数据

const loadData = (params: any) => {
  const { type = 'post' } = params;
  if (!type) {
    message.error('类别为空');
    return;
  }
  const query = {
    ...params,
    searchText: params.text
  };
  request.post('search/all', query).then((res: any) => {
    if (type === 'post') {
      postList.value = res.data.dataList;
    } else if (type === 'user') {
      userList.value = res.data.dataList;
    } else if (type === 'picture') {
      pictureList.value = res.data.dataList;
    } else if (type === 'video') {
      videoList.value = res.data.dataList;
      console.log(videoList.value);
    }
  });
};

// 实现在页面刷新时 将刷新前页面中的路由参数同步到刷新后的页面 url 中
watchEffect(() => {
  searchParams.value = {
    ...initSearchParams, // 用初始化的值来作为兜底，如果没有数据发生变化就一直是初始化的值
    text: route.query.text as string, //获取路由查询条件中的text
    type: route.params.category
  } as any;
  loadData(searchParams.value);
});

// onMounted(() => {
//   if (searchText.value === '') {
//     request.get('/post/first/list').then((res) => {
//       postList.value = res.data;
//     });
//   }
// });

const onSearch = (value: string) => {
  // 用户操作同步到 url  即在url中拼接了用户的查询条件
  router.push({
    query: {
      ...searchParams.value,
      text: value
    }
  });
  if (searchParams.value.type != '') {
    loadAllData(searchParams.value);
  } else {
    loadData(searchParams.value);
  }
};
// 改变标签页导航栏触发
const onClickTab = (key: string) => {
  // 将导航栏的key拼接到 url 上
  router.push({
    path: `/${key}`,
    query: {
      ...searchParams.value,
      type: key
    }
  });
};

const getSearchPrompt = (value: string) => {
  options.value = [];
  console.log(value);
  if (value) {
    request.get('search/get/tip/' + value).then((res: any) => {
      console.log(res);
      for (let i = 0; i < res.data.length; i++) {
        const tempMap = {
          value: res.data[i],
          color: 'red'
        };
        options.value.push(tempMap);
      }
    });
  }
};
</script>
<style scoped></style>
